<template>
    <slot name="header">
        <AccountNavbar />
    </slot>
    <div>
        <div class="container">
            <p class="title pc-box">{{$t('header.account')}}</p>
            <InfoBox v-if="(currentRouteName === 'account' && mainStore.isMobile) || !mainStore.isMobile" />
            <!-- pc -->
            <div class="content l-f l-col-stretch">
                <div class="content_left pc-box">
                    <ul class="menus">
                        <li class="menus_item" 
                        :class="index === (menuList.length - 1) ? 'menus_no-border' : ''"
                        v-for="(item,index) in menuList" 
                        :key="index">
                            <router-link class="menus_item_btn l-f" :to="item.path">
                                <img class="menus_item_btn_icon" :src="currentRoute === item.path ? item.iconActive : item.icon" />
                                <p class="menus_item_btn_label" :class="currentRoute === item.path ? 'l-text-gradient' : ''">{{item.label}}</p>
                            </router-link>
                        </li>
                    </ul>
                </div>
                <div class="content_right">
                    <slot/>
                </div>
            </div>
        </div>
        
        <template v-if="currentRouteName === 'account'">
            <!-- h5 -->
        <div class="h5-box">
            <!-- 导航栏 -->
             <div class="l-f m-nav container">
                <router-link :to="item.path" v-for="(item,index) in navList" :key="index"
                 class="m-nav_item l-f l-row-c">
                     <img class="m-nav_item_icon" :src="item.icon" />
                     <p class="m-nav_item_label">{{item.label}}</p>
                </router-link>
             </div>
             <!-- 菜单栏 -->
              <div class="m-menu">
                <div class="m-menu_item" v-for="(item,index) in actionList" :key="index">
                    <p class="m-menu_item_title">{{item.title}}</p>
                    <ul class="m-menu_item_list">
                        <li 
                        @click="menuEvent(cItem)"
                        class="m-menu_item_list_item l-f"
                        v-for="(cItem,cIndex) in item.children" 
                        :key="cIndex">
                            <div class="m-menu_item_list_item_left l-f l-f1">
                                <img class="m-menu_item_list_item_left_icon" :src="cItem.icon" />
                                <p class="m-menu_item_list_item_left_label">{{cItem.label}}</p>
                            </div>
                            <img class="m-menu_item_list_item_right" src="@/assets/icons/icon-right.svg" />
                        </li>
                    </ul>
                </div>
              </div>
        </div>
        </template>
    </div>
</template>

<script setup>
import { computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useMainStore } from '@/store'

import AccountNavbar from '@/components/accountNavbar/index.vue'
import InfoBox from './components/infoBox/index.vue'

import menuIcon1 from '@/assets/icons/icon-account_nav1.svg'
import menuIcon1Active from '@/assets/icons/icon-account_nav1-active.svg'
import menuIcon2 from '@/assets/icons/icon-account_nav2.svg'
import menuIcon2Active from '@/assets/icons/icon-account_nav2-active.svg'
import menuIcon3 from '@/assets/icons/icon-account_nav3.svg'
import menuIcon3Active from '@/assets/icons/icon-account_nav3-active.svg'
import menuIcon4 from '@/assets/icons/icon-account_nav4.svg'
import menuIcon4Active from '@/assets/icons/icon-account_nav4-active.svg'
import menuIcon5 from '@/assets/icons/icon-account_nav5.svg'
import menuIcon5Active from '@/assets/icons/icon-account_nav5-active.svg'
import menuIcon6 from '@/assets/icons/icon-account_nav6.svg'
import menuIcon6Active from '@/assets/icons/icon-account_nav6-active.svg'
import menuIcon8 from '@/assets/icons/icon-account_nav8.svg'
import menuIcon8Active from '@/assets/icons/icon-account_nav8-active.svg'
import accountLoanIcon from '@/assets/icons/icon-account_loan.svg'
import accountAuthIcon from '@/assets/icons/icon-account_auth.svg'
import accountPrivacyIcon from '@/assets/icons/icon-account_privacy.svg'
import accountLegalIcon from '@/assets/icons/icon-account_legal.svg'
import accountKfIcon from '@/assets/icons/icon-account_kf.svg'
import accountLanguageIcon from '@/assets/icons/icon-account_language.svg'

const { t } = useI18n()
const router  = useRouter()
const mainStore = useMainStore()

const currentRoute = computed(() => {
    return router.currentRoute.value.path
})
const currentRouteName = computed(() => {
    return router.currentRoute.value.name
})


const menuList = computed(() => {
    return [
        {
            icon: menuIcon1,
            iconActive: menuIcon1Active,
            label: t('account.deposit'),
            path: '/depositList'
        },
        {
            icon: menuIcon2,
            iconActive: menuIcon2Active,
            label: t('account.withdraw'),
            path: '/withdrawList'
        },
        {
            icon: menuIcon3,
            iconActive: menuIcon3Active,
            label: t('account.record'),
            path: '/record'
        },
        {
            icon: menuIcon4,
            iconActive: menuIcon4Active,
            label: t('account.notifications'),
            path: '/notification'
        },
        {
            icon: menuIcon8,
            iconActive: menuIcon8Active,
            label: t('account.realNameVerification'),
            path: '/verification'
        },
        {
            icon: menuIcon5,
            iconActive: menuIcon5Active,
            label: t('account.inviteFriends'),
            path: '/inviteFriends'
        },
        {
            icon: menuIcon6,
            iconActive: menuIcon6Active,
            label: t('account.FAQS'),
            path: '/faq'
        }
    ]
})

const navList = computed(() => {
    return [
        {
            icon: menuIcon1Active,
            label: t('account.deposit'),
            path: '/depositList'
        },
        {
            icon: menuIcon2Active,
            label: t('account.withdraw'),
            path: '/withdrawList'
        },
        // {
        //     icon: accountLoanIcon,
        //     label: t('account.loan'),
        //     path: '/loan'
        // }
    ]
})

const actionList = computed(() => {
    return [
        {
            title: t('account.general'),
            children: [
                {
                    icon: accountPrivacyIcon,
                    label: t('account.record'),
                    path: '/record'
                },
                {
                    icon: menuIcon4Active,
                    label: t('account.notifications'),
                    path: '/notification'
                },
                {
                    icon: menuIcon5Active,
                    label: t('account.inviteFriends'),
                    path: '/inviteFriends'
                },
                {
                    icon: accountAuthIcon,
                    label: t('account.realNameVerification'),
                    path: '/verification'
                },
                {
                    icon: menuIcon6Active,
                    label: t('account.FAQS'),
                    path: '/faq'
                }
            ]
        },
        {
            title: t('account.privacySecurity'),
            children: [
                {
                    icon: menuIcon3Active,
                    label: t('footer.privacyPolicy'),
                    path: '/webview?cid=38&keyword=隐私政策'
                },
                {
                    icon: accountLegalIcon,
                    label: t('account.legal'),
                    path: '/webview?cid=36&keyword=合法性'
                }
            ]
        },
        {
            title: t('account.setUp'),
            children: [
                {
                    icon: accountKfIcon,
                    label: t('account.onlineService'),
                    path: 'kf'
                },
                {
                    icon: accountLanguageIcon,
                    label: t('language'),
                    path: '/language'
                }
            ]
        }
    ]
})

watch(
() => mainStore.isMobile,    
(newVal) => {
    if(!newVal) {
        router.go({name: 'depositList'})
    }
})

onMounted(() => {
    mainStore.getUserBalance()
})


const menuEvent = (item) => {
    if(item.path == 'kf') {
        window.location.href = mainStore.webConfig.kefu
        return
    }
    router.push(item.path)
}

</script>

<style lang="scss" scoped>
@import url("./index.scss");
</style>